<template>
  <div class="page-Body">
    <h2 class="page-title">操作日志</h2>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="日期">
        <TimeFormatter
          @TimeChild="TimeHandle"
          ref="childComponentRef"
        ></TimeFormatter>
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="formInline.resourceCode"
          placeholder="请选择"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="item in menuList"
            :key="item.id"
            :label="item.resourceName"
            :value="item.resourceCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Search">搜索</el-button>
        <el-button @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      fit
      empty-text="暂无数据"
      show-header
      v-loading="loading"
      size="default"
      element-loading-text="Loading..."
      :header-cell-style="{ background: '#e7e1fb' }"
      style="width: 100%"
      max-height="600px"
    >
      <el-table-column prop="id" label="序号" />
      <el-table-column prop="" label="用户名称" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column prop="resourceName" label="类型" />
      <el-table-column prop="logInfo" label="说明" width="600" />
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 80, 100]"
        background
        layout="total,sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup name="OperationLog">
import { ref, onMounted } from 'vue';
import { getLogList } from '@/api/permission/log';
import TimeFormatter from '@/components/permission/TimeFormatter.vue';
import { GetmenuList } from '@/api/permission/role';
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 表单-时间选择器
const childComponentRef = ref(null);
const TimeArray = ref([]);
// 菜单数据
const menuList = ref([]);
// 表单数据
const formInline = ref({
  resourceCode: '',
});
// 列表数据
const tableData = ref([]);
const loading = ref(true);

// 获取列表
const LogList = async () => {
  loading.value = true;
  const params = {
    current: currentPage.value,
    size: pageSize.value,
    query: { ...formInline.value },
  };

  // 只有当时间数组有值时才添加时间参数
  if (TimeArray.value && TimeArray.value.length > 0) {
    params.startDate = TimeArray.value[0];
    params.endDate = TimeArray.value[1];
  }

  const res = await getLogList(params);
  if (res.data.code === 200) {
    tableData.value = res.data.data.items;
    total.value = res.data.data.counts || 0;
    loading.value = false;
  }
};
// 获取菜单
const MenuListHandle = async () => {
  const res = await GetmenuList();

  if (res.data.code === 200) {
    menuList.value = res.data.data;
  }
};
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  LogList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  LogList();
};
// 搜索
const Search = async () => {
  if (TimeArray.value.length === 0 && formInline.value.resourceCode === '') {
    // eslint-disable-next-line no-undef
    ElMessage.warning('请选择日期或平台审核');
    return;
  }
  LogList();
};
// 重置
const Reset = () => {
  // 如果当前已经是空值状态，直接返回
  if (TimeArray.value.length === 0 && formInline.value.resourceCode === '') {
    return;
  }

  formInline.value = {};
  TimeArray.value = []; // 确保清空时间数组
  if (childComponentRef.value) {
    childComponentRef.value.clear();
  }
  LogList();
};
//获取时间
const TimeHandle = (data) => {
  TimeArray.value = data;
};
onMounted(() => {
  MenuListHandle();
  LogList();
});
</script>

<style lang="scss" scoped></style>
